<template>
  <div class="header-nav">
    <div class="left">{{ title }}</div>
    <div class="right">
      <el-button type="primary" plain @click="toHome">返回主页</el-button>
    </div>
  </div>
</template>

<script>
import router from '@/router/index'
export default {
  name: 'HeaderNav',
  props: {
    title: {
      type: String,
      require: true
    }
  },
  methods: {
    toHome() {
      router.push({ name: 'Home' })
    }
  }
}
</script>

<style lang="scss">
.header-nav {
  display: flex;
  height: 84px;
  line-height: 84px;
  background: #2f71f5;
  .left {
    background: #2f71f5;
    min-width: 300px;
    width: 300px;
    color: #fff;
    font-size: 24px;
  }
  .right {
    flex-grow: 1;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    margin-right: 30px;
    img {
      margin-right: 20px;
    }
  }
}
</style>
